<template>
	<div>
		<p class="title"  style="font-size: 25px;">登录</p>
	</div>
	
	<div >
		<van-image
		  round
		  width="13rem"
		  height="13rem"
		  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
		/>
	</div>	
		
	<div class="login">
		<van-form @submit="onSubmit">
		  <van-cell-group inset>
		    <van-field
		      v-model="username"
		      name="用户名"
		      label="用户名"
		      placeholder="用户名"
		      :rules="[{ required: true, message: '请填写用户名' }]"
		    />
		    <van-field
		      v-model="password"
		      type="password"
		      name="密码"
		      label="密码"
		      placeholder="密码"
		      :rules="[{ required: true, message: '请填写密码' }]"
		    />
		  </van-cell-group>
		  <div style="margin: 16px;">
		    <van-button round block type="primary"  v-on:click="login">
		      提交
		    </van-button>
		  </div>
		</van-form>
	</div>
	
	<div>
		<p>没有账号？立即注册</p>
	</div>
	
	
</template>

<script setup>
	import { ref } from 'vue';
	import { Toast } from 'vant';
	import 'vant/es/toast/style';
	
	var username = ref('');
	var password = ref('');
	
	function login(){
		console.log(username.value)
		console.log(password.value)
		Toast.success('登录成功');
	}
</script>

<style scoped>
	.title{
		size:1px;
		height: 50px;
		line-height: 50px;
		background-color: #1989fa;
        color: white;
		text-align: center;
		margin-top: 0px ;
		margin-bottom: 40px;

	}
	
	.login{
		padding-top: 15%;
	}
	
</style>